/**
 * author: huangyu
 * Comfirm消息提示组件
 */
import React, { Component } from 'react';
import { Button } from 'antd';
import './Confirm.less';
export default class ConfirmChild extends Component {
    constructor(props) {
        super(props);
        this.state = {
            showAni: false
        };
    }
    componentDidMount() {
        let { show } = this.props;
        this.setState({
            showAni: show
        });
    }

    componentWillReceiveProps(nextProps) {
        let { show } = nextProps;
        this.setState({
            showAni: show
        });
    }
    componentWillUnmount() {
        // 重写组件的setState方法，直接返回空
        this.setState = (state, callback) => {
            return;
        };
    }
    okHandle = () => {
        this.props.params.onOk();
        this.setState({
            showAni: false
        }, () => {
            setTimeout(() => {
                this.props.cancleHandle();
            }, 200);
        });
    }
    cancleHandle = () => {
        let { params } = this.props;
        this.setState({
            showAni: false
        }, () => {
            setTimeout(() => {
                let callBack = typeof params.cancle === 'function' ? params.cancle : () => {};
                callBack();
                this.props.cancleHandle();
            }, 200);
        });
    }
    render() {
        let { params } = this.props;
        let { showAni } = this.state;
        return (
            <div >
                <div className={`modal-container ${showAni ? 'animate' : 'leave'}`}>
                    <div className="modal-box">
                        {/* <div className="modal-header">消息提示</div> */}
                        <div className="modal-content">
                            <h2>{params.content}</h2>
                            <p>{params.desc}</p>
                        </div>
                        <div className="modal-footer">
                            <div className="modal-footer-content">
                                <Button type="primary" onClick={this.okHandle}>确定</Button>
                                <Button onClick={this.cancleHandle}>取消</Button>
                            </div>
                        </div>
                    </div>
                    <div className={`modal-bg ${showAni ? 'animate' : 'leave'}`} onClick={this.cancleHandle}></div>
                </div>
            </div>
        );
    }
}
